import React,{Component} from 'react';
import styles from './index.less';
// import{ Input ,Button ,Icon,Modal} from 'antd';
import {Form, Icon, Input, Button, Checkbox,} from 'antd';
import { connect }  from 'react-redux';
import  { actionTypes } from './store/index';
import { Redirect,Link } from 'react-router-dom'
class Login extends Component{
	handleSubmit = (e) => {
		e.preventDefault();
		this.props.form.validateFields((err, values) => {
			if (!err) {
				this.props.handleInput(values)
				console.log('Received values of form: ', values);
			}
		});
	}
	render(){
		const { getFieldDecorator } = this.props.form;
		if(!this.props.loginStatus){
			return(
				<div className={styles.loginPage}>
					<div className={styles.logo}>
						<a href="/"><img src='../assets/logo_sn.png' /></a>
					</div>
					<div className={styles.mainBox}>
						<h4 className={styles.title}>
							<a className={`${styles.login} ${styles.span}`}>登录</a>
							<a className={styles.span}>·</a>
							<Link className={`${styles.span} ${styles.regist}`} to='/register'>注册</Link>
						</h4>
						<Form onSubmit={this.handleSubmit} className="login-form">
							<Form.Item>
								{getFieldDecorator('account', {
									rules: [{ required: true, message: '用户名不能为空!' },
										{
											whitespace:true,
											message:'用户名不允许输入空格！',
										},
										{
											message:'只能8-12输入数字+字母+下划线 .字符',
											pattern: /^[0-9a-zA-Z_.]{8,12}$/
										},
									],
									// initialValue: {account},
								})(
									<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="请输入用户名" />
								)}
							</Form.Item>
							<Form.Item>
								{getFieldDecorator('password', {
									rules: [{ required: true, message: '密码不能为空！' },
													{
														message:'长度8-16位，必须包含数字 字母 特殊符号、',
														pattern: /(?=.*[a-z])(?=.*\d)(?=.*[!#@~%^&*])[a-z\d#@!~%^&*]{8,16}$/i
													}],
								})(
									<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="请输入密码" />
								)}
							</Form.Item>
							<Form.Item>
								{getFieldDecorator('remember', {
									valuePropName: 'checked',
									initialValue: true,
								})(
									<Checkbox style={{float: 'left'}}>记住用户名</Checkbox>
								)}
								<a style={{float: 'right'}} href="">忘记密码？</a>
							</Form.Item>
							<Form.Item>
								<Button type="primary" htmlType="submit" style={{width: '100%'}}>
									登录
								</Button>
							</Form.Item>
      			</Form>
					</div>
				</div>
			)
			}else{
					return <Redirect to='/' />
			}			
	}
};

const mapState =(state) =>{
    // console.log(state.login.loginStatus)
    // console.log('account---',state.login.account)
    return{
			loginStatus:state.login.loginStatus,
			account:state.login.account,   
    }
}
const mapDispatch =(dispatch) =>({
	// 自己写的没有用antd form主键 ,(input) => state.account =input 方式传值 ，accountElem获取DOM 的方式
		// submiteFun(accountElem,passwoldElem){
		// 	dispatch(actionTypes.login(accountElem.state.value,passwoldElem.state.value))
		// 	console.log(accountElem.state.value,passwoldElem.state.value)
		// },

	handleInput(value){
		// console.log('value------',value)
		dispatch(actionTypes.login(value))
	},
})
// const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(Login);
export default connect(mapState,mapDispatch)(Form.create({ name: 'normal_login' })(Login));